<template>

  <el-row>
    <el-col :xs="24" :sm="12" :md="16" :lg="4">
      <img src="@/assets/mj/mlpe.png"/>
    </el-col>
    <el-col :xs="0" :sm="12" :md="16" :lg="8">
    </el-col>
    <el-col :xs="24" :sm="12" :md="16" :lg="12">
      <div style="display: flex;align-items: center;">
        全球科研成果融入*健康生活 |GLOBAL LIFE |Integrate Global Research Results Into Your Healthy Lifestyle
      </div>

    </el-col>
  </el-row>
  <el-row>
    <el-col :xs="24" :sm="12" :md="16" :lg="24">
      <el-menu
          :default-active="activeIndex2"
          class="MeanClass"
          mode="horizontal"
          background-color="#4c5967"
          text-color="#fff"
      >
        <sidebar-item v-for="(item,index) in MeanItemList"
                      :key="item.index"
                      :is-nest="true"
                      :item="item"
                      class="nest-menu"></sidebar-item>
      </el-menu>
    </el-col>
  </el-row>
  <el-row>
    <el-col :xs="24" :sm="12" :md="16" :lg="24">
      <img src="@/assets/mj/1.jpg" style="width: 100%">
    </el-col>
  </el-row>

  <el-row :gutter="8">
    <el-col :xs="24" :sm="24" :md="24" :lg="24" style="background-color: #31343b;padding-top: 4vh;padding-bottom: 4vh">
      <div style="display: flex;justify-content: space-around;">
        <div style="padding-left: 3vh;padding-right: 3vh">
          <div class="imageClass">
            <img src="@/assets/mj/r.png" style="width: 100%;height: 100%">
          </div>
          <div class="titleClass">产品介绍</div>
        </div>
        <div style="padding-left: 3vh;padding-right: 3vh">
          <div class="imageClass">
            <img src="@/assets/mj/b.png" style="width: 100%;height: 100%">
          </div>
          <div class="titleClass">产品介绍</div>
        </div>
        <div style="padding-left: 3vh;padding-right: 3vh">
          <div class="imageClass">
            <img src="@/assets/mj/x.png" style="width: 100%;height: 100%">
          </div>
          <div class="titleClass">产品介绍</div>
        </div>
        <div style="padding-left: 3vh;padding-right: 3vh">
          <div class="imageClass">
            <img src="@/assets/mj/z.png" style="width: 100%;height: 100%">
          </div>
          <div class="titleClass">产品介绍</div>
        </div>

        <div style="padding-left: 3vh;padding-right: 3vh">
          <div class="imageClass">
            <img src="@/assets/mj/zx.png" style="width: 100%;height: 100%">
          </div>
          <div class="titleClass">产品介绍</div>
        </div>
      </div>

    </el-col>
  </el-row>
  <el-row  >
    <el-col  :offset="1" :xs="22" :sm="12" :md="16" :lg="22">
      <img src="@/assets/mj/111.jpg" style="width: 100%;height: 100%;">
    </el-col>
  </el-row>
  <el-row >
    <el-col :offset="1" :xs="22" :sm="12" :md="16" :lg="22">
      <div style="width: 100%">
        <span>产品配方</span>
        <div>
          <img src="@/assets/mj/222.jpg" style="width: 100%;height: 100%">
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row >
    <el-col :offset="1" :xs="22" :sm="12" :md="16" :lg="22">
      <div style="display: flex;flex-wrap: wrap;">
        <div v-for="(item,index) in ChanPinList"
             class="TotalClass"
        >
          <div v-if="item.label">
            <img src="@/assets/mj/333.jpg" alt="" srcset="" class="TotalClassImg">
          </div>
          <div v-if="item.label" class="TotalClassText">
            <div>{{ item.label }}</div>
            <div class="TotalClassText1">{{ item.label1 }}</div>
          </div>
          <div v-if="!item.label" class="TotalClassText2">
            --
          </div>
        </div>

      </div>
    </el-col>
  </el-row>
  <el-row >
    <el-col :offset="1" :xs="22" :sm="12" :md="16" :lg="22">
      <div style="width: 100%">
        <span>安全菌株</span>
        <div>
          <img src="@/assets/mj/444.jpg" style="width: 100%;height: 100%">
        </div>
      </div>
    </el-col>
  </el-row>

  <div class="BOttomCLass">
    <el-row>
      <el-col :xs="24" :sm="12" :md="16" :lg="14" class="BOttomCLassTop">
        <div v-for="(item,index) in textListBottom" class="BOttomCLassOne">
          <div v-for="(items,index1) in item.label" :class="{ 'BOttomCLassOneOne': index1===0,}">
            {{ items.name }}
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="16" :lg="10" class="BOttomCLassTop">
        <div class="BOttomCLassOneRight">
          <div class="BOttomCLassOneRight1">公司地址: 山东省烟台市莱山区迎春大街198号宝龙广场6座8层</div>
          <div class="BOttomCLassOneRight1">服务电话: 13365456794</div>
          <div style="text-align: center">
            <div class="BOttomCLassOneRight2" style="display: flex;justify-content: space-around">
              <div>
                <div><img class="imageClass" src="" alt="" srcset="@/assets/mj/tmdewm.jpg"></div>
                <div>天猫</div>
              </div>
              <div>
                <div><img class="imageClass" src="" alt="" srcset="@/assets/mj/tmdewm.jpg"></div>
                <div>淘宝店</div>
              </div>
              <div>
                <div><img class="imageClass" src="" alt="" srcset="@/assets/mj/tmdewm.jpg"></div>
                <div>京东店</div>
              </div>
              <div>
                <div><img class="imageClass" src="" alt="" srcset="@/assets/mj/tmdewm.jpg"></div>
                <div>小红书</div>
              </div>
            </div>
          </div>
        </div>

      </el-col>
    </el-row>
    <el-row class="bottomOVerRow">
      <el-col :offset="2" class="bottomOVer" :xs="20" :sm="12" :md="16" :lg="20">
        <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
          <div style="display: flex;">网站
            <div class="bottomOVerSpan">|</div>
            地图
            <div class="bottomOVerSpan">|</div>
            隐私
            <div class="bottomOVerSpan">|</div>
            条款
            <div class="bottomOVerSpan">|</div>
            法律声明
            <div class="bottomOVerSpan">|</div>
            免费声明
            <div class="bottomOVerSpan">|</div>
            联系方式
            <div class="bottomOVerSpan">|</div>
            帮助中心
          </div>
          <div>友情链接: 天猫旗舰店淘宝旗舰店京东旗舰店抖音小店</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="bottomOVer1" :offset="2" :xs="20" :sm="12" :md="16" :lg="20">
        <div>
          <div>www.mopellerin. com烟台莎莉丝特商贸有限公司版权所有</div>
          <div>鲁ICP备15044256号- 1 鲁公网安备 37061302000499号</div>
        </div>

      </el-col>
    </el-row>
  </div>


</template>

<script setup>
import SidebarItem from "@/views/OfficialWebsite/SidebarItem.vue";

const activeIndex2 = ref('1')
const MeanItemList = ref([
  {
    label: '网站首页',
    value: '',
    index: '1',
  },
  {
    label: '品牌中心',
    value: '',
    index: '2',
    children: [
      {
        label: '贝益可',
        value: '',
        index: '2-1',
      },
      {
        label: '利敏舒',
        value: '',
        index: '2-2',
      },
      {
        label: '幽卫乐',
        value: '',
        index: '2-3',
      }, {
        label: '达抗元',
        value: '',
        index: '2-4',
      }, {
        label: '忧诺凝',
        value: '',
        index: '2-5',
      },
    ]
  },
  {
    label: '产品中心',
    value: '',
    index: '3',
  },
  {
    label: '研发中心',
    value: '',
    index: '4',
  }, {
    label: '质量保证',
    value: '',
    index: '5',
  }, {
    label: '奖项荣誉',
    value: '',
    index: '6',
  }, {
    label: '代理招募',
    value: '',
    index: '7',
  },
  {
    label: '服务中心',
    value: '',
    index: '8',
  },
  {
    label: '电商直邮',
    value: '',
    index: '9',
  },
])
const ChanPinList = ref([
  {
    srcurl: '',
    label: '低聚果糖',
    label1: 'FRUCTO OLIGOSACCHARIDES',
  }, {
    srcurl: '',
    label: '动物双歧杆菌乳亚种BB-12',
    label1: 'ANIMAL BIFIDOBACTERIUM LACTIS SUBSP BB-12',
  }, {
    srcurl: '',
    label: '鼠李糖乳酪杆菌HN001',
    label1: 'LACTOBACILLUS RHAMNOSUS HN001',
  }, {
    srcurl: '',
    label: '动物双歧杆菌乳亚种HN019',
    label1: 'ANIMAL BIFIDOBACTERIUM LACTIS SUBSP HN019',
  }, {
    srcurl: '',
    label: '动物双歧杆菌乳亚种Bi-07',
    label1: 'ANIMAL BIFIDOBACTERIUM LACTIS Bi-07',
  }, {
    srcurl: '',
    label: '发酵粘液乳杆菌CECT5716',
    label1: 'LACTOBACILLUS FERMENTANS CECT5716',
  }, {
    srcurl: '',
    label: '短双歧杆菌M-16V',
    label1: 'BIFIDO BACTERIUM BREVE M-16V',
  },

  {
    srcurl: '',
    label: '',
    label1: '',
  },
  {
    srcurl: '',
    label: '',
    label1: '',
  },
  {
    srcurl: '',
    label: '',
    label1: '',
  },
  {
    srcurl: '',
    label: '',
    label1: '',
  },
  {
    srcurl: '',
    label: '',
    label1: '',
  },

])
const textListBottom = ref([
  {
    label: [{
      name: "首页"
    },]
  },
  {
    label: [
      {
        name: "产品中心"
      }, {
        name: "贝益可"
      }, {
        name: "利敏舒"
      }, {
        name: "幽卫乐"
      }, {
        name: "达抗元"
      }, {
        name: "忧诺宁"
      },
    ]
  },
  {
    label: [
      {
        name: "品牌中心"
      }, {
        name: "品牌起源"
      }, {
        name: "创始人说"
      }, {
        name: "品牌寓意"
      }, {
        name: "品牌梦想"
      }, {
        name: "品牌简介"
      },
    ]
  },
  {
    label: [
      {
        name: "研发中心"
      }, {
        name: "研发理念"
      }, {
        name: "研发领域"
      }, {
        name: "科研机构"
      }, {
        name: "医疗机构"
      }, {
        name: "合作院校"
      }, {
        name: "合作企业"
      }, {
        name: "技术专家"
      }, {
        name: "医疗专家"
      }, {
        name: "工艺技术"
      }, {
        name: "生产实力"
      },
    ]
  },
  {
    label: [
      {
        name: "质量保证"
      }, {
        name: "质量认证"
      }, {
        name: "权威检测"
      },
    ]
  },
  {
    label: [
      {
        name: "奖项荣誉"
      }, {
        name: "奖项认定"
      }, {
        name: "荣誉称号"
      },
    ]
  },
  {
    label: [
      {
        name: "代理招募"
      }, {
        name: "品牌优势"
      }, {
        name: "招商条件"
      }, {
        name: "合作流程"
      }, {
        name: "资料下载"
      },
    ]
  },
  {
    label: [
      {
        name: "服务中心"
      }, {
        name: "产品问答"
      }, {
        name: "客服中心"
      }, {
        name: "防伪查询"
      }, {
        name: "联系我们"
      },
    ]
  },
])
</script>

<style lang='scss' scoped>

.el-col {
  display: flex;
  //align-items: center;
  justify-content: center;

}

.MeanClass {
  width: 100%;
  background: #4c5967;
}

/* 当视窗宽度小于 600px 时 */
@media (max-width: 750px) {
  .titleClass {
    text-align: center;
    font-size: 6px;
    color: white;
    padding-top: 3vh;
  }
  .imageClass {
    width: 3vh;
    height: 3vh;
  }
  .PaddCLass {
    padding: 0rem 2rem 0rem 1rem;

  }
  .TotalClass {
    width: 11.3rem;
    height: 11.3rem;
    border: 0.1rem solid #d3d3d3;
    padding-top: 3rem;
    padding-left: 2rem;

    .TotalClassImg {
      width: 2rem;
      height: 2rem;
    }

    .TotalClassText {
      padding-top: 1rem;

      .TotalClassText1 {
        padding-top: 1rem;
        font-size: 0.3rem;
      }

      .TotalClassText2 {
        padding-top: 2rem
      }
    }
  }
  .BOttomCLass {

    bottom: 0;
    width: 100%;
    height: 20rem;
    background-image: url("@/assets/mj/bottom.jpg");
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    color: white;

    .BOttomCLassTop {
      padding-top: 0.5rem;
    }

    .BOttomCLassOne {
      padding: 0 0.2rem 0 0.2rem;

      .BOttomCLassOneOne {
        padding: 0.2rem 0 0.2rem 0;
      }

    }

    .BOttomCLassOneRight1 {
      padding-top: 0.5rem;
    }

    .BOttomCLassOneRight2 {
      padding-top: 1rem;
    }

    .bottomOVerRow {
      padding-top: 0.5rem;

    }

    .bottomOVer {
      border-top: 0.1rem solid white;
      border-bottom: 0.1rem solid white;
      color: white;
      width: 100%;
      height: 5vh;

      .bottomOVerSpan {
        padding: 0 0.2rem 0 0.2rem;
      }
      .bottomOVer1 {
        justify-content: left;
        padding-top: 1rem;
      }
    }
  }
}


/* 当视窗宽度大于 900px 时 */
@media (min-width: 901px) {
  .titleClass {
    text-align: center;
    font-size: 12px;
    color: white;
    padding-top: 3vh;
  }
  .imageClass {
    width: 8vh;
    height: 8vh;
  }
  .PaddCLass {
    padding: 0rem 6rem 0rem 6rem;
  }
  .TotalClass {
    width: 15.55rem;
    height: 18rem;
    border: 1px solid #d3d3d3;
    padding-top: 2rem;
    padding-left: 2rem;

    .TotalClassImg {
      width: 4rem;
      height: 4rem;
    }

    .TotalClassText {
      padding-top: 2rem;

      .TotalClassText1 {
        padding-top: 1rem
      }

      .TotalClassText2 {
        padding-top: 6rem
      }
    }
  }
  .BOttomCLass {

    bottom: 0;
    width: 100%;
    height: 40rem;
    background-image: url("@/assets/mj/bottom.jpg");
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    color: #acafb3;

    .BOttomCLassTop {
      padding-top: 4rem;
    }

    .BOttomCLassOne {
      padding: 0 1rem 0 1rem;

      .BOttomCLassOneOne {

        padding: 0.5rem 0 0.5rem 0;
        color: white;
      }
    }

    .BOttomCLassOneRight {
      .BOttomCLassOneRight1 {
        padding-top: 1rem;
      }

      .BOttomCLassOneRight2 {
        padding-top: 5rem;
      }
    }

    .bottomOVerRow {
      padding-top: 1rem;

    }

    .bottomOVer {
      color: white;
      border-top: 0.1rem solid white;
      border-bottom: 0.1rem solid white;

      width: 100%;
      height: 10vh;

      .bottomOVerSpan {

        padding: 0 1rem 0 1rem;
      }
    }

    .bottomOVer1 {
      justify-content: left;
      padding-top: 3rem;
    }
  }
}

/* 当视窗宽度在 600px 和 900px 之间时 */
@media (min-width: 751px) and (max-width: 900px) {
  .titleClass {
    text-align: center;
    font-size: 8px;
    color: white;
    padding-top: 3vh;
  }
  .imageClass {
    width: 6vh;
    height: 6vh;
  }
  .PaddCLass {

  }
  .TotalClass {

  }
}
</style>
